<!-- 头部 -->
<template>
  <div class="rightbox">
    <div class="flex rightbox-father">
      <div class="boxline rightbox-top " >
          <h2 class="titleText u-m-b-10">当日学生出勤统计</h2>
          <div class="region-echarts" v-if="pageflag" style="height:100%;">
            <Echart
              :options="regionOptions"
              id="regionChart"
              class="region-echarts_center"
            ></Echart>
          </div>
      </div>
      <div class="rightbox-bottom flex-1 ">
        <slot name="bottom"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echart/index.vue'
export default {
  name: "leftTopBox",
  components: {
    Echart
  },
  props:{
    dataVal:{
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },
  watch:{
    dataVal:{
      handler(val){
        if(val.length>0){
          this.getData(val)
        }
      },
      deep:true,
      immediate:true
    }
  },


  mounted() {
    // this.getData();
  },
  methods: {
    getData(res) {
      this.pageflag = true;
      if (res.length > 0) {
        const newData = [];
        res.forEach(iv=>{
          const obj = {
            name: iv.name,
            value: iv.count
          };
          newData.push(obj);
        })
        this.init(newData);
      }
    },
    init(newData) {
      // 区域分布
      this.regionOptions = {
        color: ["#5087EC"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          left:80
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#ccc'
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            color:'#ccc'
          },
          // data: ['离线人数', '在线人数', '离校人数', '在校人数']
          data: ['在校人数', '离校人数', '在线人数', '离线人数']
        },
        series: [
          {
            name:'数据',
            type: "bar",
            data: newData,
          },
        ],
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.rightbox {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  &-father{
    flex-direction: column;
    height: 100%;
  }
  &-top{
    height: 48%;
  }
  &-bottom{
    overflow: hidden;
  }
}
</style>
